<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>作业-图书管理</title>
  <!-- 引入 bootstrap 样式表 -->
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    body {
      padding-top: 50px;
    }
  </style>
</head>

<body>
  <!-- 栅格系统 -->
  <div class="container">
    <div class="d-flex justify-content-between align-items-center">
      <h1>图书管理</h1>
      <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal">
        添加
      </button>
    </div>
    <table class="table table-bordered table-striped table-dark table-hover text-center">
      <thead>
        <!-- 表头行 -->
        <tr>
          <th scope="col">Id</th>
          <th scope="col">书名</th>
          <th scope="col">作者</th>
          <th scope="col">出版社</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 表格中的每一行 -->
        <!-- <tr>
            <th scope="row">xxx</th>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>
              <button type="button" class="btn btn-link btn-sm btn-delete">
                删除
              </button>
              <button type="button" class="btn btn-link btn-sm btn-update">
                编辑
              </button>
            </td>
          </tr> -->
      </tbody>
    </table>
  </div>

  <!-- add Modal -->
  <div class="modal fade" id="addModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加图书</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="addForm" class="p-3">
            <!-- 书名 -->
            <div class="mb-3">
              <label class="form-label">书名</label>
              <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称" name="bookname" />
            </div>
            <!-- 作者 -->
            <div class="mb-3">
              <label class="form-label">作者</label>
              <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
            </div>
            <!-- 出版社 -->
            <div class="mb-3">
              <label class="form-label">出版社</label>
              <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称" name="publisher" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            取消
          </button>
          <button type="button" class="btn btn-primary" id="addBtn">
            确认
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- edit Modal -->
  <div class="modal fade" id="editModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">编辑图书</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="editForm" class="p-3">
            <input type="hidden" name="id" />
            <!-- 书名 -->
            <div class="mb-3">
              <label class="form-label">书名</label>
              <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称" name="bookname" />
            </div>
            <!-- 作者 -->
            <div class="mb-3">
              <label class="form-label">作者</label>
              <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
            </div>
            <!-- 出版社 -->
            <div class="mb-3">
              <label class="form-label">出版社</label>
              <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称" name="publisher" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            取消
          </button>
          <button type="button" class="btn btn-primary" id="editBtn">
            确认
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入 lib 目录下的 bootstrap 和 axios -->
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-value.js"></script>
  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/nprogress.js"></script>
  <script>
    axios.defaults.baseURL = 'http://www.itcbc.com:3006'

    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      NProgress.start()
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      // 2xx 范围内的状态码都会触发该函数。
      // 对响应数据做点什么
      NProgress.done()
      return response;
    }, function (error) {
      // 超出 2xx 范围的状态码都会触发该函数。
      // 对响应错误做点什么
      NProgress.done()
      return Promise.reject(error);
    });

    // 1.----获取图书并渲染到表格
    // ～～获取图书
    function books() {

      // axios({
      //   method: 'GET',
      //   url: '/api/getbooks',
      //   params: {
      //     appkey: 'YOYO666'
      //   }
      // })

      // 修改
      axios.get('/api/getbooks', { params: { appkey: 'YOYO666' } })
        .then(({ data: res }) => {

          // ～～渲染表格
          let arr = res.data.map(item => {
            return   `
                      <tr>
                        <th scope="row">${item.id}</th>
                        <td>${item.bookname}</td>
                        <td>${item.author}</td>
                        <td>${item.publisher}</td>
                        <td>
                          <button data-id="${item.id}" type="button" class="btn btn-link btn-sm btn-delete">删除</button>
                          <button data-id="${item.id}" data-bookname="${item.bookname}" data-author="${item.author}" data-publisher="${item.publisher}" type="button" class="btn btn-link btn-sm btn-update">编辑</button>
                        </td>
                      </tr>
                      `
          })
          // console.log(arr.join(''))
          document.querySelector('tbody').innerHTML = arr.join('')
        }).catch((error) => {
          alert(error.response.data.message)
        })
    }
    books()

    // 2.----添加图书
    let addModal = new bootstrap.Modal(document.querySelector('#addModal'))

    document.querySelector('.btn-success').addEventListener('click', function () {
      addModal.show()
    })
    document.querySelector('#addBtn').addEventListener('click', function () {

      // let bookname = document.querySelector('#addForm [name=bookname]').value
      // let author = document.querySelector('#addForm [name=author]').value
      // let publisher = document.querySelector('#addForm [name=publisher]').value
      // axios({
      //   method: 'POST',
      //   url: '/api/addbook',
      //   data: {
      //     bookname: bookname,
      //     author: author,
      //     publisher: publisher,
      //     appkey: 'YOYO666'
      //   }
      // })

      // 修改
      let data = val(document.querySelector('#addForm'))
      data.appkey = 'YOYO666'
      axios.post('/api/addbook', data)
        .then(({ data: res }) => {
          if (res.status === 0) {
            books()
            document.querySelector('#addForm').reset()
            addModal.hide()
          }
        }).catch((error) => {
          alert(error.response.data.message)
        })
    })

    // 3.----删除和修改
    let editModal = new bootstrap.Modal(document.querySelector('#editModal'))

    // 找父级
    document.querySelector('tbody').addEventListener('click', function (e) {
      // 判断
      if (e.target.classList.contains('btn-delete')) {
        let id = e.target.dataset.id

        // axios({
        //   method: 'DELETE',
        //   url: '/api/delbook',
        //   params: {
        //     id: id,
        //     appkey: 'YOYO666'
        //   }
        // })

        // 修改
        axios.delete('/api/delbook', { params: { id: id, appkey: 'YOYO666' } })
          .then(({ data: res }) => {
            if (res.status === 0) {
              books()
            }
          }).catch((error) => {
            alert(error.response.data.message)
          })
      }

      // 判断
      if (e.target.classList.contains('btn-update')) {

        editModal.show()
        let shuju = e.target.dataset
        // 修改
        val(document.querySelector('#editForm'), shuju)

        // for (let key in shuju) {
        //   document.querySelector(`#editForm [name=${key}]`).value = datas[key]
        // }
      }
    })

    document.querySelector('#editBtn').addEventListener('click', function () {
      let id = document.querySelector('#editModal [name=id]').value
      let bookname = document.querySelector('#editModal [name=bookname]').value
      let author = document.querySelector('#editModal [name=author]').value
      let publisher = document.querySelector('#editModal [name=publisher]').value

      // axios({
      //   method: 'PUT',
      //   url: '/api/updatebook',
      //   data: {
      //     id,
      //     bookname,
      //     author,
      //     publisher,
      //     appkey: 'YOYO666'
      //   }
      // })

      // 修改
      axios.put('/api/updatebook', { id, bookname, author, publisher, appkey: 'YOYO666' })
        .then(({ data: res }) => {
          if (res.status === 0) {
            books()
            editModal.hide()
          }
        }).catch((error) => {
          alert(error.response.data.message)
        })
    })
  </script>
</body>

</html>